#@layout()

#define css()
	<link rel="stylesheet" type="text/css" href="/assets/pubu/css/base.css">
	<link rel="stylesheet" type="text/css" href="/assets/pubu/css/index.css">
	<style>
		@media (min-width: 1200px){
	    footer {
	        background-color: #3a3e47;
	        margin-top: 0px;
		    }
		}
	</style>
	
#end
#define js()
	<script type="text/javascript" src="/assets/pubu/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="/assets/pubu/js/jQueryColor.js"></script>
	<!--这个插件是瀑布流主插件函数必须-->
	<script type="text/javascript" src="/assets/pubu/js/jquery.masonry.min.js"></script>
	<!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
	<script type="text/javascript" src="/assets/pubu/js/jQeasing.js"></script>
	<script type="text/javascript">
	/*
		抛开瀑布流布局各种乱七八糟的算法，基于masonry的瀑布流，很是简单的，而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
		masonry还有很多参数我这里注解了常用的参数
	 */
		var p = 2;//最开始加载了一页，所以这里从2开始
		$(function(){
				/*瀑布流开始*/
				var container = $('.waterfull ul');
				var loading=$('#imloading');
				// 初始化loading状态
				loading.data("on",true);
				/*判断瀑布流最大布局宽度，最大为1280*/
				function tores(){
					var tmpWid=$(window).width();
					if(tmpWid>1280){
						tmpWid=1280;
					}else{
						var column=Math.floor(tmpWid/300);
						tmpWid=column*300;
					}
					$('.waterfull').width(tmpWid);
				}
				tores();
				$(window).resize(function(){
					tores();
				});
				container.imagesLoaded(function(){
				  container.masonry({
				  	columnWidth: 300,
				    itemSelector : '.item',
				    isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
				    isAnimated: true,//是否采用jquery动画进行重拍版
				    isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
				    isResizable: true,//是否自动布局默认true
				    animationOptions: {
						duration: 800,
						easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
						queue: false//是否队列，从一点填充瀑布流
					}
				  });
				});
				/*从后台获取到的数据*/
				var sqlJson=[];
				/*本应该通过ajax从后台请求过来类似sqljson的数据然后，便利，进行填充，这里我们用sqlJson来模拟一下数据*/
				$(window).scroll(function(){
					if(!loading.data("on")) return;
					// 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
					var itemNum=$('#waterfull').find('.item').length;
					var itemArr=[];
					itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					var maxTop=Math.max.apply(null,itemArr);
					
					if(maxTop<$(window).height()+$(document).scrollTop()){
						//用ajax从后台获取数据
						
						$.ajax("/gallery/getImgs?p="+p, {
							type: "POST"
							, cache: false
							, dataType: "json"
							, beforeSend: function() {
								//do nothing
							}
							, success: function(ret) {
								if (ret.isOk) {
									//layer.alert(ret.msg, {icon: 6});
									//如果删除的是课程，那么删除之后跳转到我的课程
									sqlJson = ret.posts;
									//页码加1
									p = p+1;
									console.log("p"+p);

									if (sqlJson.length == 0) {
										//loading.text('就有这么多了！');
										return;
									}
									

									//return ;					
									
								} else {
									layer.msg(ret.msg, {
										shift: 6
										, shade: 0.3
										, time: 2500
										, offset: "165px"
										, closeBtn: 1
										, shadeClose: true
									});
								}
							}
							, complete: function() {
							}
						});

						//加载更多数据
						loading.data("on",false).fadeIn(800);
						(function(sqlJson){
							console.log(sqlJson);
							/*初始加载页数从2开始，因此这里判断当页数大于2且没有图片的时候结束*/
							if(p>2 && sqlJson.length == 0){
								loading.text('就有这么多了！');//移到上面ajax请求处判断
								return;
							}else{
								var html="";
								for(var i in sqlJson){
									html+="<li class='item'><a href='"+"/view/gallery/"+sqlJson[i].id+"' class='a-img'><img src='"+sqlJson[i].last_images+"'></a>";
									html+="<h2 class='li-title'>"+sqlJson[i].title+"</h2>";
									html+="<p class='description'>"+sqlJson[i].summary+"</p><div class='qianm clearfloat'>";
									html+="<span class='sp1'><b>"+sqlJson[i].views+"</b>浏览</span>";
									html+="<span class='sp2'>"+sqlJson[i].nickName+"</span><span class='sp3'>"+sqlJson[i].createAt+"&nbsp;By</span></div></li>";		
								}
								/*模拟ajax请求数据时延时800毫秒*/
								var time=setTimeout(function(){
									$(html).find('img').each(function(index){
										loadImage($(this).attr('src'));
									})
									var $newElems = $(html).css({ opacity: 0}).appendTo(container);
									$newElems.imagesLoaded(function(){
										$newElems.animate({ opacity: 1},800);
										container.masonry( 'appended', $newElems,true);
										loading.data("on",true).fadeOut();
										clearTimeout(time);
							        });
								},800)
							}
						})(sqlJson);
					}
				});
				function loadImage(url) {
				     var img = new Image(); 
				     //创建一个Image对象，实现图片的预下载
				      img.src = url;
				      if (img.complete) {
				         return img.src;
				      }
				      img.onload = function () {
				       	return img.src;
				      };
				 };
				 loadImage('assets/pubu/images/one.jpeg');
				/*item hover效果*/
				var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
				$('#waterfull').on('mouseover','.item',function(){
					var random=Math.floor(Math.random() * 4);
					$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
				});
				$('#waterfull').on('mouseout','.item',function(){
					$(this).stop(true).animate({'backgroundColor':'#fff'},1000);
				});
		})
    </script>
#end

#define main()
<div class="wrap" id="wrap">
	<div class="container">
		<div class="row">
			<div class="main clearfix">
				<div class="col-xs-3 col-md-3">
					<div class="content">
		<!-- 瀑布流样式开始 -->
		<div class="waterfull clearfloat" id="waterfull">
			#if(!posts)
				<div class="col-xs-12 col-md-12 no-content">
					<p>对不起，暂时没有内容</p>
				</div>
			#end
			<ul>

				#for(post : posts)
				<li class="item">
					<a href="/view/gallery/#(post.id)" class="a-img">
						<img src="#(post.last_images)" alt="">
						
					</a>
					<h2 class="li-title" title="#(post.title)">#(post.title)</h2>
					<p class="description">#(post.summary)</p>
					<div class="qianm clearfloat">
						<span class="sp1"><b>#(post.views)</b>浏览</span>
						<span class="sp2">#(post.nickName)</span>
						<span class="sp3">#(post.createAt)&nbsp;By</span>
					</div>
				</li>
				#end
				
			</ul>
		</div>
		<!-- loading按钮自己通过样式调整 -->
		<div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
			更多图片加载中.....
		</div>
</div>
				</div>
			</div>
		</div>
	</div>
</div>

#end